<template>
    <div class="list_box_pd">
        <div class="handle-filter clearfix">
            <div class="fl">
                <div class="handle-radio">
                    <el-radio-group v-model="radio1">
                        <el-radio-button v-for="(item, index) in tabs" :key="index" :label="item.name"></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="fr">
                <div class="filter-item">
                    <form class="filter-search" action="">
                        <input type="text">
                        <button><i class="el-icon-search"></i></button>
                    </form>
                </div>
            </div>
        </div>
        <div class="clearfix">
            <div class="fl">
                <el-button type="primary" plain>全部</el-button>
                <el-button type="primary" plain>配送</el-button>
                <el-button type="primary" plain>自提</el-button>
            </div>
            <div class="fr">
                <el-switch
                    v-model="value1"
                    inactive-text="自动接单(已开启)">
                </el-switch>
            </div>
        </div>
        <div class="order_box">
            <div class="box_tit">
                <div>买家信息</div>
                <div>订单信息</div>
                <div>操作</div>
            </div>
            <div>
                <el-row class="box_cont">
                    <el-col :span="6" class="cont_l">
                        <el-form label-width="100px" label-position="left">
                            <div class="num_box flex align_c">
                                <div class="order_num theme_bg">002</div>
                                <div class="orange">今天 18:30～19:00【自提】</div>
                            </div>
                            <div class="font_w">
                                <span class="l_label">预留手机</span>
                                <span>18828129139</span>
                            </div>
                            <div class="mark_box">
                                <span class="orange">备注：</span>
                                <span>快点配送</span>
                            </div>
                            <el-form-item label="订单编号：">
                                <div class="flex justify_b">
                                    <div>5654768759959</div>
                                    <div class="theme_txt pointer">复制</div>
                                </div>
                            </el-form-item>
                            <el-form-item label="取货号：">
                                <div>003</div>
                            </el-form-item>
                            <el-form-item label="订单时间：">
                                <div>2019.03.23 21:22:34</div>
                            </el-form-item>
                            <el-form-item label="商品数量：">
                                <div>5</div>
                            </el-form-item>
                            <el-form-item label="订单金额：">
                                <div>¥92.00</div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="13" class="cont_c">
                        <div class="c_tit">
                            <span class="c_tit_total">共6件商品</span>
                            <span>总计：¥92.00</span>
                        </div>
                        <div class="c_item flex row" v-for="(item, index) in goods" :key="index">
                            <img class="c_item_img" :src="item.icon" alt="">
                            <div v-if="item.sub.length <= 0" class="c_item_r item_single flex justify_b">
                                <div>{{item.name}}</div>
                                <div class="">
                                    <span>x{{item.sum}}</span>
                                    <span class="item_price">{{item.price}}</span>
                                </div>
                            </div>
                            <div v-else class="c_item_r">
                                <div>{{item.name}}</div>
                                <div class="item_multi flex justify_b align_c" v-for="(subItem, subIndex) in item.sub" :key="subIndex">
                                    <div>{{subItem.name}}</div>
                                    <div>
                                        <span>x{{subItem.sum}}</span>
                                        <span class="item_price">{{subItem.price}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5" class="cont_r">
                        <div class="delivery_btn">
                            <el-button type="primary">已打包叫配送员</el-button>
                            <div>
                                <span>打印订单</span>
                                <span class="btn_line">|</span>
                                <span>取消订单</span>
                            </div>
                        </div>
                        <div class="cont_r_process">
                            <div>配送信息</div>
                            <div class="r_steps">
                                <el-steps direction="vertical" :active="2">
                                    <el-step title="等待配送员接单" description="2018-12-21 12:22:55" icon="el-icon-success"></el-step>
                                    <el-step title="正在打包" description="2018-12-21 12:22:55" icon="el-icon-success"></el-step>
                                    <el-step title="步骤 3" description="2018-12-21 12:22:55" icon="el-icon-remove"></el-step>
                                </el-steps>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio1: '',
            value1: '',
            tabs: [
                {
                    id: 1,
                    name: '待接单'
                },
                {
                    id: 2,
                    name: '待发货'
                },
                {
                    id: 3,
                    name: '待核销'
                },
                {
                    id: 4,
                    name: '已核销'
                },
                {
                    id: 5,
                    name: '已取消'
                }
            ],
            goods: [
                {
                    name: '德芙巧克力',
                    icon: '',
                    sub: [
                        {
                            name: '草莓味',
                            sum: 1,
                            price: '23.00'
                        },
                        {
                            name: '橘子味',
                            sum: 2,
                            price: '23.00'
                        },
                        {
                            name: '荔枝味',
                            sum: 1,
                            price: '23.00'
                        }
                    ]
                },
                {
                    name: '德芙巧克力',
                    icon: '',
                    sum: 1,
                    price: '23.00',
                    sub: []
                },
                {
                    name: '德芙巧克力',
                    icon: '',
                    sum: 1,
                    price: '23.00',
                    sub: []
                }
            ]
        };
    }
}
</script>

<style scoped lang="scss">
.filter-item {
    margin: 0!important;
}
.order_box {
    .box_tit {
        display: flex;
        justify-content: space-between;
        padding: 10px 160px;
        margin: 20px 0;
        background-color: #F1F1F1;
        border-radius: 4px;
        min-width: 1000px;
    }
    .box_cont {
        font-size: 18px;
        color: #191919;
        min-width: 1100px;
        height: 430px;
        border: 1px solid #D4D4D4;
        background-color: #EFF3FA;
        ::-webkit-scrollbar {
            width:4px;
            background-color: rgb(167, 166, 166);
        }
        .cont_l {
            padding: 20px;
            box-sizing: border-box;
            height: 100%;
            .l_label {
                display: inline-block;
                width: 100px;
            }
            .el-form-item {
                margin-bottom: 0!important;
            }
            .num_box {
                margin-bottom: 30px;
                .order_num {
                    font-size: 24px;
                    padding: 2px 6px;
                    color: #fff;
                    border-radius: 4px;
                    margin-right: 12px;;
                }
            }
            .mark_box {
                margin: 20px 0 30px 0;
            }
        }
        .cont_c {
            padding: 0 60px;
            box-sizing: border-box;
            background-color: #fff;
            height: 100%;
            overflow-y: scroll;
            .c_tit {
                text-align: right;
                padding: 34px 0 20px 0;
                .c_tit_total {
                    margin-right: 30px;
                }
            }
            .c_item {
                width: 100%;
                padding: 10px 0;
                border-top: 1px solid #E0E0E0;
                .c_item_img {
                    height: 68px;
                    width: 68px;
                    border-radius: 4px;
                    background-color: #6587CC;
                }
                .c_item_r {
                    flex: 1;
                    padding-left: 16px;
                }
                .item_single {
                    margin-top: 22px;
                }
                .item_multi {
                    color: #555555;
                    font-size: 16px;
                    margin-top: 10px;
                }
                .item_price {
                    margin-left: 50px;
                }
            }
        }
        .cont_r {
            border-left: 1px solid #D4D4D4;
            height: 100%;
            .delivery_btn {
                font-size: 20px;
                text-align: center;
                color: #969696;
                background-color: #fff;
                padding-bottom: 14px;
                .el-button {
                    font-size: 20px;
                    margin: 18px 0 16px 0;
                }
                .btn_line {
                    margin: 0 10px;
                }
            }
            .cont_r_process {
                padding: 20px 18px;
                .r_steps {
                    padding-top: 20px;
                    height: 200px;
                }
            }
        }
    }
}
</style>